import { useEffect, useState } from "react";
import { LyAutoComplete } from "../index";

const staticOptions = [
  { id: "1", name: "张三", age: 18, gender: "男" },
  { id: "2", name: "李四", age: 19, gender: "女" },
  { id: "3", name: "王五", age: 20, gender: "男" },
  { id: "4", name: "赵六", age: 21, gender: "女" },
  { id: "5", name: "钱七", age: 22, gender: "男" },
];

const AutoComplete = () => {
  const [options, setOptions] = useState<any>([]);
  const [value, setValue] = useState("");
  useEffect(() => {
    setOptions(staticOptions);
  }, []);

  // 搜索数据
  const searchOptions = (value: string) => {
    const filterOptions = staticOptions.filter(
      (item) => item.name.indexOf(value) !== -1
    );
    setOptions(filterOptions);
  };

  const onChange = (value) => {
    setValue(value);
  };

  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
      width: 100,
      align: "center",
      render: (text: string) => <div>{text}</div>,
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
      width: 100,
      align: "center",
      render: (text: string) => <div>{text}</div>,
    },
    {
      title: "性别",
      dataIndex: "gender",
      key: "gender",
      width: 100,
      align: "center",
      render: (text: string) => <div>{text}</div>,
    },
  ];

  return (
    <LyAutoComplete
      minWidth="150px"
      placeholder="请输入姓名"
      options={options}
      columns={columns}
      value={value}
      searchOptions={searchOptions}
      debounceTime={500}
      valueKey={"name"}
      onChange={onChange}
    />
  );
};

export default AutoComplete;
